<template>
  <!-- 极淡暖白毛玻璃导航 -->
  <nav
    ref="headerRef"
    class="header-glass w-full shadow-md backdrop-blur-xl border-b border-white/20
           flex items-center justify-between px-6 py-3 fixed top-0 left-0 z-50"
    :style="`--header-height: ${headerHeight}px`"
  >
  <!-- LOGO：外层容器控制圆形框大小，内层图片固定尺寸 -->
  <router-link to="/" class="flex items-center gap-3 group">
    <!-- 外层圆形框：控制整体大小（可调整 w/h 放大框） -->
    <div class="w-16 h-16 rounded-full bg-white shadow-md flex items-center justify-center">
      <!-- 内层图片：固定原始尺寸，居中显示（确保完整） -->
      <img :src="logo" alt="LOGO" class="w-11 h-11 object-cover">
    </div>
    <span class="logo-text">海龟汤</span>
  </router-link>

    <!-- 中间导航 -->
    <div class="hidden md:flex items-center gap-7 text-sm">
      <router-link to="/" class="nav-link">首页</router-link>
      <router-link to="/classic-library" class="nav-link">经典题库</router-link>
      <router-link to="/shop" class="nav-link">海龟商城</router-link>
      <!-- 玩法介绍颜色修改 -->
      <a @click.prevent="$emit('show-how-to-play')" class="nav-link text-indigo-500">玩法介绍</a>
      <router-link to="/achievement" class="nav-link">成就中心</router-link>
      <router-link to="/contribute" class="nav-link">贡献题目</router-link>
      <router-link to="/support" class="nav-link">在线客服</router-link>
      <router-link to="/vip" class="nav-link vip">会员中心</router-link>

    </div>

    <!-- 右侧操作区 -->
    <div class="flex items-center gap-5">
      <!-- 海龟币 -->
      <div class="flex items-center gap-2 text-sm">
        <!-- 钻石图标颜色修改 -->
        <i class="fa fa-diamond text-indigo-500"></i>
        <span class="font-semibold text-stone-700">{{ balance }}</span>
        <button
          @click="handleRechargeClick"
          class="recharge-btn"
          title="充值"
        >+</button>
      </div>

      <!-- 消息 -->
      <router-link to="/messages"
                   class="relative text-xl text-stone-600 hover:text-indigo-500 transition">
        <i class="fa fa-bell"/>
        <span v-if="unreadCount > 0"
              class="unread-badge">{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
      </router-link>

      <!-- 头像 -->
      <button @click="handleProfileClick"
              class="profile-btn">
        <!-- 头像图标颜色修改 -->
        <i class="fa fa-user-circle text-xl text-indigo-500"/>
        <span class="hidden sm:inline text-sm font-medium">个人中心</span>
      </button>
    </div>
  </nav>
</template>

<script>
export default { name: 'HeaderView' }
</script>

<script setup>
// 脚本部分不变
import { ref, onMounted, onUnmounted } from 'vue'
import logo from '@/assets/logo.png'
import { useRouter } from 'vue-router'

const router = useRouter()
const unreadCount = 3
const balance = ref(0)

const headerRef = ref(null)
const headerHeight = ref(0)

const calculateHeaderHeight = () => {
  if (headerRef.value) {
    headerHeight.value = headerRef.value.offsetHeight
    document.documentElement.style.setProperty('--header-height', `${headerHeight.value}px`)
  }
}

const handleRechargeClick = () => window.open('/recharge', '_blank')
const handleProfileClick = () => {
  const isLoggedIn = !!localStorage.getItem('token')
  router.push(isLoggedIn ? '/profile' : '/login')
}

onMounted(() => {
  calculateHeaderHeight()
  window.addEventListener('resize', calculateHeaderHeight)
  const savedBalance = localStorage.getItem('user_balance')
  if (savedBalance) balance.value = Number(savedBalance)
})

onUnmounted(() => window.removeEventListener('resize', calculateHeaderHeight))
</script>

<style scoped>
/* 1. 极淡暖白毛玻璃 */
.header-glass {
  background: rgba(255, 253, 250, 0.75); /* 淡淡暖白 */
  backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.3);
}

/* 2. Logo 文字：调整为靛蓝渐变 */
.logo-text {
  font-size: 1.5rem;
  font-weight: 800;
  background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.3s;
}
.group:hover .logo-text {
  transform: scale(1.05);
}

/* 3. 导航链接：调整为靛蓝色系 */
.nav-link {
  position: relative;
  font-weight: 600;
  color: #78716c;               /* stone-600 */
  transition: color 0.25s;
}
.nav-link:hover {
  color: #4f46e5;               /* indigo-600 */
}
.nav-link.router-link-active {
  color: #4f46e5;
}
.nav-link.router-link-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: #818cf8;          /* indigo-400 */
  border-radius: 2px;
}

/* 会员中心高亮：靛蓝渐变 */
.vip {
  background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* 4. 充值按钮：靛蓝渐变 */
.recharge-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #818cf8 0%, #4f46e5 100%);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}
.recharge-btn:hover {
  transform: translateY(-1px) scale(1.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 5. 消息红点（保持红色，更醒目） */
.unread-badge {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 18px;
  height: 18px;
  font-size: 0.65rem;
  font-weight: 700;
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    /* 新增或调整的样式 */
  line-height: 1; /* 确保行高不会影响居中 */
  padding: 0; /* 移除默认内边距 */
  min-width: 18px; /* 确保内容不会撑大徽章 */
  text-align: center; /* 作为网格布局的补充，增强兼容性 */
}

/* 6. 个人中心按钮：调整为靛蓝色系 */
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.6);
  color: #78716c;
  transition: background 0.25s, color 0.25s;
}
.profile-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #4f46e5;               /* indigo-600 */
}
</style>